<template>
  <div class="home-page">
    <div class="carousel">
      <div class="carousel-wrapper" :style="carouselStyle">
        <div
          class="carousel-slide"
          v-for="(textbook, index) in carouselTextbooks"
          :key="index"
        >
          <div class="my-slide">
            <image-preview :src="textbook.coverImage" :width="300" :height="400"/>
            <p>{{ textbook.textbookName }}</p>
          </div>
        </div>
      </div>
      <button class="carousel-button prev" @click="prevSlide">←</button>
      <button class="carousel-button next" @click="nextSlide">→</button>
    </div>
    <div class="carousel-pagination">
      <span
        v-for="(textbook, index) in carouselTextbooks"
        :key="index"
        class="dot"
        :class="{ active: currentSlide === index }"
        @click="goToSlide(index)"
      ></span>
    </div>
  </div>
</template>

<script>
export default {
  name: "HomePage",
  data() {
    return {
      carouselTextbooks: [
        {
          textbookName: "Python编程从入门到实践",
          coverImage: "/profile/upload/2024/12/24/v2-c2e9756131d9ceef95ae021915bc26c2_1440w_20241224232549A002.png"
        },
        {
          textbookName: "数据结构与算法分析",
          coverImage: "/profile/upload/2024/12/24/557db8d0e44f23f9775e9e14e915240d_20241224232710A003.jpeg"
        },
        {
          textbookName: "操作系统概念",
          coverImage: "/profile/upload/2024/12/24/9de96520bc142c946a04717fdf5d14d90_20241224232822A004.jpg"
        }
      ],
      currentSlide: 0 // 当前展示的幻灯片索引
    };
  },
  mounted() {
    this.startAutoSlide(); // 启动自动切换
  },
  beforeDestroy() {
    clearInterval(this.autoSlideInterval); // 清除定时器
  },
  computed: {
    carouselStyle() {
      // 总体宽度为 100%，间距为每张图片的 2%
      const slideWidth = 100 / this.carouselTextbooks.length;
      const gap = 2; // 间距百分比
      return {
        transform: `translateX(-${this.currentSlide * (slideWidth + gap)}%)`, // 根据当前 slide 和间距计算偏移
        transition: 'transform 0.5s ease',
      };
    }
  },
  methods: {
    startAutoSlide() {
      this.autoSlideInterval = setInterval(() => {
        this.nextSlide();
      }, 3000); // 每3秒切换一次
    },
    nextSlide() {
      this.currentSlide = (this.currentSlide + 1) % this.carouselTextbooks.length; // 循环切换
    },
    prevSlide() {
      this.currentSlide = (this.currentSlide - 1 + this.carouselTextbooks.length) % this.carouselTextbooks.length; // 循环切换
    },
    goToSlide(index) {
      this.currentSlide = index; // 跳转到指定索引
    }
  }
};
</script>

<style scoped>
.home-page {
  padding: 20px; /* 给首页页面添加内边距，可按需调整样式 */
}
.carousel {
  position: relative;
  overflow: hidden; /* 隐藏溢出内容 */
  width: 100%;
  height: 500px; /* 根据实际需求调整轮播图高度 */
}
.carousel-wrapper {
  display: flex;
  gap: 200px; /* 每张图片之间的间隙 */
  transition: transform 0.5s ease-in-out; /* 平滑切换 */
}
.carousel-slide {
  flex: 0 0 calc(100% / 3 - 2%); /* 每张图片宽度等分，同时减去间距影响 */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.my-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.carousel-image {
  width: 90%; /* 缩小图片大小以形成更紧凑布局 */
  max-height: 400px; /* 保持图片最大高度一致 */
  object-fit: contain; /* 图片适应，但不会拉伸变形 */
}
.carousel-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(255, 255, 255, 0.8);
  border: none;
  cursor: pointer;
  z-index: 10;
  padding: 10px;
  font-size: 20px;
}
.carousel-button.prev {
  left: 10px; /* 左侧按钮位置 */
}
.carousel-button.next {
  right: 10px; /* 右侧按钮位置 */
}
.carousel-pagination {
  text-align: center;
  margin-top: 10px;
}
.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  background-color: #bbb;
  border-radius: 50%;
  cursor: pointer;
}
.dot.active {
  background-color: #717171; /* Active 状态 */
}

@media (max-width: 768px) {
  .carousel-slide {
    flex: 0 0 100%; /* 小屏幕每张图片占整个宽度 */
  }
  .carousel-wrapper {
    gap: 1%; /* 减小小屏幕间距 */
  }
  .carousel-image {
    width: 80%; /* 小屏幕图片宽度更小 */
  }
}
</style>
